<script>
    var arrayObj = new Array();
    var clearVal = new Array();
    var slider;
    $(function () {
        var a = 0;

        fromVerify("user");
        fromVerify("pass");



        slide();
        /*
        登录按钮事件
         */
        $("#login").click(function () {
            if (arrayObj.length != 0) {
                for (i in arrayObj) {
                    if(arrayObj[i]=="slider"){
                        prompt('请拖动滑块验证', 'alert-warning', 1500);
                    }else{
                        flash('#' + arrayObj[i] + '', 8, 10, 100);
                        error(arrayObj[i]);
                        slide();
                    }
                }
            } else {
                var s = "";
                for (i in clearVal) {
                    s += $("#" + clearVal[i] + " input").val();
                }
                $.ajax({
                    url: "/LxCommunity/user/loginByName",
                    type:"post",
                    data: {
                        "username": $("#userInput").val(),
                        "password": $("#passInput").val(),
                    },
                    success: function (data) {
                        if(data.flag){
                            prompt('登录成功', 'alert-success', 1500);
                            window.location.href = "/LxCommunity";
                        }else{
                            prompt('用户名或密码错误', 'alert-danger', 1500);
                            slide();
                            for (i in arrayObj) {
                                Render("", arrayObj[i]);
                            }
                            return;
                        }
                    },
                    error: function (e) {
                        prompt('用户名或密码错误', 'alert-danger', 1500);
                        slide();
                        for (i in arrayObj) {
                            Render("", arrayObj[i]);
                        }
                        return;
                    }
                });



                for (i in clearVal) {
                    $("#" + clearVal[i] + " input").val("");
                    addArr(clearVal[i]);
                }
            }

        });



    });



    function slide() {
        addArr("slider");
        $("#labelTip").html("拖动滑块验证");
        $("#labelTip").css("color", "#787878");
        slider = new SliderUnlock("#slider", {
            successLabelTip: "验证成功"
        }, function () {
            //prompt('验证成功', 'alert-success', 1500);
            for (i in arrayObj) {
                if (arrayObj[i] == "slider") {
                    arrayObj.splice(i, 1);
                }
            }
        });
        slider.init();
    }


    /**
     * 表单验证
     * @param id id名
     */
    function fromVerify(id) {
        arrayObj.push(id);
        clearVal.push(id);
        $("#" + id + " input").keyup(function (e) {
            var str = $(this).val();
            Render(str, id);
        });
    }


    function Render(str, id) {
        if (str.length > 0) {
            remove(id);
            success(id);
            for (i in arrayObj) {
                if (arrayObj[i] == id) {
                    arrayObj.splice(i, 1);
                }
            }
        } else {
            remove(id);
            addArr(id);
        }
    }

    /**
     * 错误的表单样式
     * @param attr id名
     */
    function error(attr) {
        $("#" + attr + "").addClass("has-error has-feedback");
        $("#" + attr + " label").addClass("control-label");
        $("#" + attr + " label").attr("aria-describedby", "inputSuccess2Status");
        $("#" + attr + " span").attr("aria-hidden", "true");
        $("#" + attr + " span").addClass("glyphicon glyphicon-remove form-control-feedback");
    }

    /**
     * 正确的表单样式
     * @param attr id名
     */
    function success(attr) {
        $("#" + attr + "").addClass("has-success has-feedback");
        $("#" + attr + " label").addClass("control-label");
        $("#" + attr + " label").attr("aria-describedby", "inputSuccess2Status");
        $("#" + attr + " span").attr("aria-hidden", "true");
        $("#" + attr + " span").addClass("glyphicon glyphicon-ok form-control-feedback");
    }

    /**
     * 空“”的表单样式
     * @param attr id名
     */
    function remove(attr) {
        $("#" + attr + "").removeClass("has-success has-error has-feedback");
        $("#" + attr + " label").removeClass("control-label");
        $("#" + attr + " label").removeAttr("aria-describedby");
        $("#" + attr + " span").removeAttr("aria-hidden");
        $("#" + attr + " span").removeClass("glyphicon glyphicon-ok glyphicon-remove form-control-feedback");
    }


    /**
     * input 抖动效果
     * @param obj 控件
     * @param time 震动时间长——短循环长度
     * @param wh 震动幅度px
     * @param fx 动画速度s
     */
    function flash(obj, time, wh, fx) {
        $(function () {
            var $panel = $(obj);
            var offset = $panel.offset() - $panel.width();
            var x = offset.left;
            var y = offset.top;
            for (var i = 1; i <= time; i++) {
                if (i % 2 == 0) {
                    $panel.animate({left: '+' + wh + 'px'}, fx);
                } else {
                    $panel.animate({left: '-' + wh + 'px'}, fx);
                }
            }
            $panel.animate({left: 0}, fx);
            $panel.offset({top: y, left: x});

        })
    }

    /**
     * 向arrayObj添加id
     * @param id
     */
    function addArr(id) {
        var f = true;
        for (i in arrayObj) {
            if (arrayObj[i] == id) {
                f = false;
                break;
            } else {
                f = true;
            }
        }
        if (f) {
            arrayObj.push(id);
        }
    }

    /**
     *
     * @param message
     * @param style
     * @param time
     */
    var prompt = function (message, style, time) {
        style = (style === undefined) ? 'alert-success' : style;
        $('.alert').removeClass("alert-success");
        $('.alert').removeClass("alert-danger");
        $('.alert').removeClass("alert-warning");
        $('.alert').html(message).addClass('alert ' + style).show().delay(time).fadeOut();
    };

    // 成功提示
    var success_prompt = function (message, time) {
        prompt(message, 'alert-success', time);
    };

    // 失败提示
    var fail_prompt = function (message, time) {
        prompt(message, 'alert-danger', time);
    };

    // 提醒
    var warning_prompt = function (message, time) {
        prompt(message, 'alert-warning', time);
    };

    // 信息提示
    var info_prompt = function (message, time) {
        prompt(message, 'alert-info', time);
    };




</script>
<style>
    .Myalert {
        margin: 0px;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        text-align: center;
        z-index: 9999;
    }
</style>
<div class="alert Myalert"></div>
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
    <form class="input-lg">

        <div id="user" class="form-group">
            <label for="userInput" class="control-label">用户名或昵称</label>
            <input type="email" class="form-control input-lg" id="userInput" placeholder="请输入用户名或昵称">
            <span></span>
        </div>

        <div id="pass" class="form-group">
            <label for="passInput" class="control-label">密码</label>
            <input type="password" class="form-control input-lg" id="passInput" placeholder="请输入密码">
            <span></span>
        </div>

        <div id="col-md-12 col-sm-12 col-xs-12">
            <div id="slider">
                <div id="slider_bg" style="width: 0px;"></div>
                <span id="label" style="left: 0px;">&gt;&gt;</span>
                <span id="labelTip" style="color: rgb(120, 120, 120);">拖动滑块验证</span>
            </div>
        </div>

        <button onClick="return false;"
                id="login" type="submit"
                class="btn btn-info col-md-12 col-sm-12 col-xs-12 input-lg">登录
        </button>
    </form>
</div>